<template>
    <div id="muke-recycle-row" v-bind:file="file" v-bind:index="index">
        <!-- 图标 -->
        <div id="file-icon">
            <div v-if="file.fileType==='pdf'">
                <pdf id="file-i"></pdf>
            </div>
            <div v-else-if="file.fileType==='word'">
                <word id="file-i"></word>
            </div>
            <div v-else-if="file.fileType==='excel'">
                <excel id="file-i"></excel>
            </div>
            <div v-else-if="file.fileType==='ppt'">
                <ppt id="file-i"></ppt>
            </div>
            <div v-else-if="file.fileType==='html'">
                <mukeHtml id="file-i"></mukeHtml>
            </div>
            <div v-else-if="file.fileType==='rar'">
                <rar id="file-i"></rar>
            </div>
            <div v-else-if="file.fileType==='zip'">
                <zip id="file-i"></zip>
            </div>
            <div v-else-if="file.fileType==='txt'">
                <txt id="file-i"></txt>
            </div>
            <div v-else-if="file.type==='folder'">
                <folder id="file-i"></folder>
            </div>
            <div v-else>
                <other id="file-i"></other>
            </div>
        </div>
        <!-- 文件名 -->
        <div id="muke-file-name" v-bind:title="file.filename">
            <span v-on:title="file.name">{{file.name}}</span>
        </div>
        <!-- 文件大小 -->
        <div id="muke-file-size">
            <span class="file-size">{{file.fileSize}}</span> 
        </div>
        <!-- 创建时间 -->
        <div id="muke-file-date">
            <span>{{file.deleteTime}}</span>
        </div>
        <!-- <div style="clear:both;"></div> -->

    </div>
</template>

<script>
    import pdf from '../icons/pdf';
    import word from '../icons/word';
    import excel from '../icons/excel';
    import ppt from '../icons/ppt';
    import txt from '../icons/txt';
    import rar from '../icons/rar';
    import zip from '../icons/zip';
    import mukeHtml from '../icons/html';
    import other from '../icons/other';
    import folder from '../icons/folder';
export default {
    props:['file','index'],
    components:{
        pdf,word,excel,
        ppt,txt,rar,zip,
        mukeHtml,other,
        folder
    },
    
    
}
</script>

<style scoped>
    #muke-recycle-row{
        /* height: 60px; */
        width: 100%;line-height: 60px;
        border-radius: 5px;
        /* background-color:blue; */
        /* position: absolute; */
    }
    #muke-recycle-row:hover{
        background-color: gainsboro;
    }
    #file-checkbox{
        float: left;
        width: 30px;
        padding-top: 20px;padding-left: 5px;
    }
    #file-i{
        width: 40px;
        height: 40px;
        /*margin: 10px 10px 10px 10px ;*/
    }
    #file-icon{
        padding-top: 10px;
        padding-left: 10px;
        float: left;
        line-height: 60px;
    }
    #muke-file-name{
        float: left;
        margin-left: 10px;
        margin-right: 10px;
        width: 20%;
        overflow: hidden;
        line-height: 60px;
        font-family: Poppins;
        font-size: 15px;
        position: relative;
    }
    #muke-file-size{
        float: left;
        width: 20%;
        line-height: 60px;
        font-family: Poppins;
        font-size: 15px;
    }
    #muke-file-date{
        width: 20%;float: left;
        font-family: Poppins;
        font-size: 15px;
        line-height: 60px;
    }


</style>